<template>
  <div class="main-container">
    <h1 style="color: #409eff; margin-bottom: 20px">
      <i class="el-icon-folder-opened"></i>
      模型结构管理
    </h1>
    <el-tree
      :data="treeData"
      node-key="ID"
      :props="defaultProps"
      @node-contextmenu="handleContextMenu"
      class="navigation-tree"
    >
      <template #default="{ node }">
        <span class="tree-node">
          <el-icon><FolderOpened /></el-icon>
          {{ node.label }}
        </span>
      </template>
    </el-tree>
    <ContextMenu
      v-if="showMenu"
      :position="menuPosition"
      @select="handleMenuSelect"
      @close="showMenu = false"
      @showAttachment="showAttachment"
    />
    <div id="container" class="hidden"></div>
    <FileViewer
      v-if="visible"
      v-model:visible="visible"
      :file="currentFile"
      @close="currentFile = null"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import ContextMenu from "@/components/ContextMenu.vue";
import { FolderOpened } from "@element-plus/icons-vue";
import {
  Scene,
  DataType,
  CallbackName,
  DFTCore,
} from "/public/visionkit_sdk/dft-vision-kit.es";
import FileViewer from "@/components/FileViewer/index.vue";
const router = useRouter();
const treeData = ref(); // 树形数据
const menuPosition = ref({ x: 0, y: 0, modelID: null });
const selectedNode = ref(null);
const showMenu = ref(false);
const handleContextMenu = (event, node) => {
  event.preventDefault();
  showMenu.value = true;
  selectedNode.value = node;
  menuPosition.value = { x: event.clientX, y: event.clientY, modelID: node.ID };
};
const currentFile = ref({});
const visible = ref(false);
const showAttachment = (file) => {
  visible.value = true;
  const fileName = file.split(".");
  currentFile.value.type = fileName[1];
  currentFile.value.url = file;
  currentFile.value.name = fileName[0];
};
const handleMenuSelect = (action) => {
  if (action === "model") {
    window.open(
      window.location.origin + "/#/modelPage?id=" + selectedNode.value.ID
    );
    // router.push({
    //   path: "/modelPage",
    //   query: {
    //     id: selectedNode.value.ID,
    //   },
    // });
  } else {
    // 触发附件显示逻辑
  }
};
const defaultProps = {
  children: "children",
  label: "name",
  id: "ID",
};
onMounted(() => {
  const scene = new Scene({
    container: document.getElementById("container"),
    id: "96683850814767104",
    url: "/700102",
    // 加载方式设置为离线数据加载
    dataType: DataType.Offline,
    // 初始化场景时配置场景背景色为红色
    background: "none",
  });
  scene.on(CallbackName.Loaded, (event: any) => {
    treeData.value = scene.tree.modelTrees;
  });
  // 鼠标左键
  scene.coreScene.on(DFTCore.CLICK, (event: any) => {});

  document.addEventListener("click", function (event) {
    showMenu.value = false;
  });
});
</script>

<style scoped>
.main-container {
  height: 100vh;
  padding: 20px;
  background: #f5f6fa;
}

.navigation-tree {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin: 19px 0;
}
</style>
